// css reset 重置, 其实就是磨平不同浏览器之间的默认样式差异
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#app {
    // 1vh 是指 1% 视口高度
    height: 100vh;
    display: flex;
    flex-direction: column;
    .topNav {
        display: flex;
        // align-items 指的是副轴对齐方式
        align-items: center;
        padding: 0 10px;
        height: 40px;
        .title {
            text-align: center;
            flex: 1;
        }
    }
    
    .mainContent {
        background-color: #eee;
        // flex 属性可以设定在空间多余或不足的情况下, 如何适应选项
        flex: 1;
        display: flex;
        .left {
            background-color: rosybrown;
            width: 80px;
            .item {
                padding: 5px 10px;
            }
        }
        .right {
            background-color: goldenrod;
            flex: 1;
            .item {
                padding: 10px;
            }
        }
    }
}